সিএসএস(৩) বর্ডার-ইমেজ
HTML এলিমেন্টকে আরও আকর্ষণীয় করে উপস্থাপন করার জন্য আপনি এটির চারপাশে বর্ডার ব্যবহার করতে পারেন।
আর বর্ডারকে আরও আকর্ষণীয় করে তুলার জন্য বর্ডার-ইমেজ ব্যবহার করতে পারেন। সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি এই কাজটি খুব সহজেই করতে পারবেন।
এক নজরে বর্ডার-ইমেজের সম্ভাব্য প্রোপার্টিসমূহ
সিএসএস(৩) border-image প্রোপার্টি
সিএসএস(৩) border-image প্রোপার্টির মাধ্যমে আপনি একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে ইমেজ ব্যবহার করতে পারেন।
বর্ডার ইমেজ প্রোপার্টির ৩টি অংশ থাকেঃ
- বর্ডার হিসেবে ব্যবহার করার জন্য একটি ইমেজ।
- ইমেজটি কোথায় স্লাইস হবে তা নির্দেশ করে।
- মাঝের সেকশনটি রিপিট বা প্রসারিত হবে কিনা তা নির্দেশ করে।
উদাহরণ হিসেবে আমরা নিম্নের "border_image.jpg" ইমেজটি ব্যবহার করে বর্ডার তৈরি করবোঃ
ইমেজটির চারটি কর্ণার উক্ত বডারের চার কর্ণারে অবস্থান নিবে এবং ইমেজের মাঝের অংশটি নির্দেশিত উপায়ে বর্ডারের মাঝখানের অংশে রিপিট বা প্রসারিত হবে।
নোটঃ কোনো এলিমেন্টে border-image প্রোপার্টি ব্যবহার করতে হলে, প্রথমে ঐ এলিমেন্টে border প্রোপার্টি সেট করতে হবে।
সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Image) - Example
<!DOCTYPE html>
<html>
<head>
<style>
#bimage {
border:8px solid transparent;
padding:20px;
-webkit-border-image:url(border_image.jpg) 20 round;
-o-border-image: url(border_image.jpg) 20 round;
border-image: url(border_image.jpg) 20 round;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p><strong>নোটঃ</strong> বর্ডার-ইমেজ প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।</p>
<p>border-image প্রোপার্টি ব্যবহার করে একটি এলিমেন্টের চারপাশে ইমেজ সেটঃ</p>
<p id="bimage"> এই এলিমেন্টের চারপাশে বর্ডার সেট করার জন্য ছবির মাঝের অংশ পুনরাবৃত্ত হয়েছে।</p>
</body>
</html>
নিচের উদাহরণে ছবির মাঝের অংশকে প্রসারিত করে বর্ডার তৈরি করা দেখানো হলোঃ
সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Image) - Example
<!DOCTYPE html>
<html>
<head>
<style>
#bimage {
border:8px solid transparent;
padding:20px;
-webkit-border-image:url(border_image.jpg) 35 stretch;
-o-border-image:url(border_image.jpg) 35 stretch;
border-image:url(border_image.jpg) 35 stretch;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p><strong>নোটঃ</strong> বর্ডার-ইমেজ প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।</p>
<p> border-image প্রোপার্টি ব্যবহার করে একটি এলিমেন্টের চারপাশে বর্ডার হিসেবে ইমেজ সেটঃ</p>
<p id="bimage"> এই এলিমেন্টের চারপাশে বর্ডার সেট করার জন্য ছবির মাঝের অংশ প্রসারিত হয়েছে।</p>
</body>
</html>
নোটঃ border-image প্রোপার্টিটি border-image-source, border-image-slice, border-image-width, border-image-outset এবং border-image-repeat প্রোপার্টি গুলো একত্রে সেট করার জন্য একটি সংক্ষিপ্ত প্রোপার্টি।
সিএসএস(৩) border-image-slice প্রোপার্টি
স্লাইস ভ্যালু সম্পূর্ণ বর্ডারকেই পরিবর্তন করে দিতে পারে। নিম্নে বিভিন্ন ধরনের স্লাইস ভ্যালুর ব্যবহার দেখানো হলোঃ
সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Image) - Example
<!DOCTYPE html>
<html>
<head>
<style>
#bimage1 {
border: 15px solid transparent;
padding:20px;
-webkit-border-image: url(border_image.jpg) 50% round;
-o-border-image: url(border_image.jpg) 50% round;
border-image: url(border_image.jpg) 50% round;
}
#bimage2 {
border: 15px solid transparent;
padding:20px;
-webkit-border-image: url(border_image.jpg) 30% round;
-o-border-image: url(border_image.jpg) 30% round;
border-image: url(border_image.jpg) 30% round;
}
#bimage3 {
border:15px solid transparent;
padding:20px;
-webkit-border-image: url(border_image.jpg) 25% round;
-o-border-image: url(border_image.jpg) 25% round;
border-image: url(border_image.jpg) 25% round;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p id="bimage1">border-image টি 50% round হয়েছে;</p>
<p id="bimage2">border-image টি 30% round হয়েছে।;</p>
<p id="bimage3">border-image টি 25% round হয়েছে।;</p>
<p><strong>নোটঃ</strong> border-image প্রোপার্টি IE 10 এবং তার পূর্বের ভার্সনে সাপোর্ট করে না।</p>
</body>
</html>
গ্র্যাডিয়েন্ট বর্ডার
border-image প্রোপার্টির ভ্যালু হিসেবে linear-gradient() ব্যবহার করে এইচটিএমএল এলিমেন্টে গ্রাডিয়েন্ট বর্ডার সেট করা যায়।
সিএসএস৩ বর্ডার ইমেজ (CSS3 Border Image) - Example
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
border: 15px solid;
-webkit-border-image: linear-gradient(orange, red) 10;
-o-border-image: linear-gradient(orange, red) 10;
border-image: linear-gradient(orange, red) 10;
padding: 10px;
}
</style>
<title>সিএসএস border-image এর উদাহরণ</title>
</head>
<body>
<p id="gradient">এই এলিমেন্টের চারপাশে বর্ডার সেট করার জন্য ছবির মাঝের অংশ প্রসারিত হয়েছে।</p>
</body>
</html>
Read more
